---
---
<!-- Title: Responsive Email Developer's Guide for Magento EE 1.14.1 and Magento CE 1.9.1 -->
<!-- URL: ee1141-ce191-responsive-email -->


<html lang=en>

<head>
    <meta charset=utf-8>

    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/common/css/stylesheet.css" />
    <link rel="stylesheet" href="{{ site.baseurl }}/common/css/stylesheet-fonts.css" type="text/css" charset="utf-8">
    <link rel="icon" href="{{ site.baseurl }}/common/css/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="{{ site.baseurl }}/common/css/favicon.ico" type="image/x-icon">
    <title>Responsive Email Developer's Guide for Magento EE 1.14.1 and Magento CE 1.9.1</title>

</head>

<body>
    

    <img src="{{ site.baseurl }}/guides/m1x/images/m1xheader.png" width="1024" alt="header" />
    {% include m1x/eol_message.html %}

    <div id="content">

        <h1>Responsive Email Developer's Guide for Magento EE 1.14.1 and Magento CE 1.9.1</h1>
        <p><em>by Erik Hansen</em></p>
        <p><a href="{{ site.m1xgithuburl }}/ce19-ee114/RWD_responsive_emails.html" target="_blank">Edit this page on
                GitHub <img src="{{ site.baseurl }}/common/images/github_icon.png" height="15px"></a></p>

        <div class="toc">
            <h4 class="toc">Table of Contents</h4>
            <ul>
                <li><a href="#intro">Introduction</a></li>
                <li><a href="#cron">Using cron to Send Emails</a></li>
                <li><a href="#supported">Supported Email Clients and Devices</a></li>
                <li><a href="#upgrade">Important Information about Upgrading</a></li>
                <li><a href="#custom-head-foot">Customizing the Header or Footer in Transactional Emails</a></li>
                <li><a href="#email-css">Customizing CSS Styles for Emails</a></li>
                <li><a href="#hi-rez-logo">Using a High-Resolution Logo</a></li>
                <li><a href="#contact-info">Using Contact Information in Transaction Emails</a></li>
                <li><a href="#localizing">Localizing Transactional Emails</a></li>
                <li><a href="#newsletter-template">Using Updated Newsletter Templates</a></li>
                <li><a href="#help">Getting Help</a></li>
            </ul>
        </div>

        <h2 id="intro">Introduction</h2>
        <p>We improved transactional emails and newsletter templates in Magento Enterprise 1.14.1 and Magento Community
            1.9.1 in a number of ways, including:</p>
        <ul>
            <li>Emails are now optimized for any screen size, including mobile and tablet devices</li>
            <li>Header and footer content for transactional emails are now contained in their own files</li>
            <li>CSS is now contained in separate CSS files</li>
            <li>We provide you with a responsive sample newsletter template</li>
        </ul>
        <div class="msg-box important"><img src="{{ site.baseurl }}/guides/m1x/images/icon-note.png" alt="note"
                align="left" width="40"><span><strong>Note</strong>: This article focuses on responsive emails but the
                same techniques can be used for newsletter templates as well. For more information about newsletter
                templates, see <a href="#newsletter-template">Using Updated Newsletter Templates</a>.</div>


        <h2 id="cron">Using cron to Send Emails</h2>
        <p>Starting in Magento EE 1.14.1 and CE 1.9.1, your Magento cron job sends <em>all</em> emails, including
            transactional emails. You must configure cron for emails to work.</p>
        <p>For more information, see <a href="{{ site.m1xgdeurl }}/install/installing_install.html#install-cron"
                target="_blank">Setting Up Cron Jobs</a>.</p>

        <h2 id="supported">Supported Email Clients and Devices</h2>
        <p>We tested responsive emails using a combination of real devices and <a href="http://litmus.com/"
                target="_blank">Litmus</a>. Due to the greatly varied level of support among email clients for modern
            web technologies, not all email clients rendered the emails perfectly. However, all of the following clients
            should render the emails in a manner that allows them to be easily read without obvious issues. Refer to the
            following sections for more information.</p>

        <h3 id="supported-desktop">Supported Desktop Clients</h3>

        <table class="confluenceTable" width="40%">
            <tbody>
                <col width="50%">
                <col width="50%">
                <tr>
                    <th>Operating system</th>
                    <th>Clients supported</th>
                </tr>
                <tr>
                    <td>OS X 10.8</td>
                    <td>Apple Mail 6</td>
                </tr>
                <tr>
                    <td>OS X 10.7</td>
                    <td>Outlook 2011</td>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li>Windows 8</li>
                            <li>Windows 7</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Outlook 2013</li>
                            <li>Outlook 2010</li>
                            <li>Outlook 2007</li>
                            <li>Outlook 2003</li>
                        </ul>
                </tr>
            </tbody>
        </table>

        <h3 id="supported-mobile">Supported Mobile Clients</h3>
        <table class="confluenceTable" width="200px">
            <tbody>
                <col width="50%">
                <col width="50%">
                <tr>
                    <th>Operating system</th>
                    <th>Clients supported</th>
                </tr>
                <tr>
                    <td>Android 4.2 ("Jelly Bean")</td>
                    <td>Native email app</td>
                </tr>
                <tr>
                    <td>Android 2.3 ("Gingerbread")</td>
                    <td>Native email app</td>
                </tr>
                <tr>
                    <td>Gmail App (Android 4.2)</td>
                    <td>Native email app</td>
                </tr>
                <tr>
                    <td>Blackberry 5 OS</td>
                    <td>Native email app</td>
                </tr>
                <tr>
                    <td>iOS 8</td>
                    <td>
                        <ul>
                            <li>iPhone 6</li>
                            <li>iPhone 6 Plus</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>iOS 7</td>
                    <td>
                        <ul>
                            <li>iPad (Retina)</li>
                            <li>iPad Mini</li>
                            <li>iPhone 5s</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>iOS 6</td>
                    <td>
                        <strong>Mail on these devices:</strong>
                        <ul>
                            <li>iPhone 5</li>
                            <li>iPhone 4s</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

        <h3 id="supported-web">Supported Web Clients</h3>

        <table class="confluenceTable" width="200px">
            <tbody>
                <col width="50%">
                <col width="50%">
                <tr>
                    <th>Email application</th>
                    <th>Browsers supported<sup>*</sup></th>
                </tr>
                <tr>
                    <td>AOL Mail</td>
                    <td>
                        <ul>
                            <li>Chrome</li>
                            <li>Internet Explorer</li>
                            <li>Firefox</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Gmail</td>
                    <td>
                        <ul>
                            <li>Chrome</li>
                            <li>Internet Explorer</li>
                            <li>Firefox</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Yahoo! Mail</td>
                    <td>
                        <ul>
                            <li>Chrome</li>
                            <li>Internet Explorer</li>
                            <li>Firefox</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Outlook.com</td>
                    <td>
                        <ul>
                            <li>Chrome</li>
                            <li>Internet Explorer</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <p><em><sup>*</sup>The latest version of each browser was used for testing.</em></p>

        <h2 id="upgrade">Important Information about Upgrading</h2>
        <p>This section applies to anyone who used transactional emails in a version earlier than EE 1.14.1 or CE 1.9.1.
        </p>
        <p>After upgrading from an earlier Magento version, you should preview your transactional emails, looking for
            changes in the logo, fonts, and styles. Because of changes introduced in this release, you might notice some
            differences.</p>
        <p>Also, in CE 1.9.1 and EE 1.14.1 for the first time, you must specify a height and width for your logo image;
            the dimensions must be set to the area in which the logo displays. For more information, see <a
                href="#hi-rez-logo">Using a High-Resolution Logo</a>.</p>

        <h2 id="custom-head-foot">Customizing the Header or Footer in Transactional Emails</h2>
        <p>In earlier Magento CE and EE versions, each transactional email template contained a copy of the HTML for the
            header and footer. To make it easier to customize transactional emails, the header and footer HTML is now
            centralized in the following template files:</p>
        <ul>
            <li><code>[your Magento install dir]/app/locale/en_US/template/email/html/header.html</code></li>
            <li><code>[your Magento install dir]/app/locale/en_US/template/email/html/footer.html</code></li>
        </ul>
        <p>
            The header and footer template files get included in the transactional emails using a new
            <code>template</code> directive. For an example of how this works, open
            <code>app/locale/en_US/template/email/account_new.html</code>. It contains two directives that include
            <code>header.html</code> and <code>footer.html</code>:</p>

            <pre>&#123;&#123;template config_path="design/email/header"}}</pre>
            <pre>&#123;&#123;template config_path="design/email/footer"}}</pre>
            <p>You can customize the header and footer as discussed in the following sections:</p>
        <ul>
            <li><a href="#custom-head-foot-files">Customizing Header and Footer Templates Using Files</a></li>
            <li><a href="#custom-head-foot-admin">Customizing Header and Footer Templates Using the Magento Admin
                    Panel</a></li>
        </ul>

        <h3 id="custom-head-foot-files">Customizing Header and Footer Templates Using Files</h3>
        <p>If you can access the Magento server file system, you can customize the header and footer by editing the
            following files:</p>
        <ul>
            <li><code>[your Magento install dir]/app/locale/en_US/template/email/html/header.html</code></li>
            <li><code>[your Magento install dir]/app/locale/en_US/template/email/html/footer.html</code></li>
        </ul>
        <div class="msg-box important"><img src="{{ site.baseurl }}/guides/m1x/images/icon-note.png" alt="note"
                align="left" width="40"><span><strong>Note</strong>: To make changes to the templates at the website or
                store view configuration scopes, see the next section.</div>


        <h3 id="custom-head-foot-admin">Customizing Header and Footer Templates Using the Magento Admin Panel</h3>
        <p>You must use the Magento Admin Panel to customize header and footer templates if any of the following are
            true:</p>
        <ul>
            <li>You cannot access the Magento server file system</li>
            <li>To customize the templates for a unique website, store, or store view</li>
        </ul>
        <p>The example discussed in the following sections shows how to customize the header template. You can use the
            same procedure to customize the footer as well.</p>
        <p>Using custom templates is a two-step process: first, define the template, and second, specify the website or
            store view on which it's used. See one of the following sections for more information:</p>
        <ul>
            <li><a href="#custom-head-foot-admin-custom">Customizing the Template in the Admin Panel</a></li>
            <li><a href="#custom-head-foot-admin-assign">Using the Template in a Website or Store View</a></li>
        </ul>

        <h4 id="custom-head-foot-admin-custom">Customizing the Template in the Admin Panel</h4>
        <ol>
            <li>Log in to the Magento Admin Panel as an administrator.</li>
            <li>Click <strong>System</strong> &gt; <strong>Transactional Emails</strong>.</li>
            <li>On the Transactional Emails page, click <strong>Add New Template</strong>.</li>
            <li>From the <strong>Template</strong> list, click <strong>Email - Header</strong>.</li>
            <li>From the <strong>Locale</strong> list, click the template's locale.</li>
            <li>Click <strong>Load Template</strong>.</li>
            <li>Enter the following information:
                <table>
                    <tbody>
                        <tr>
                            <th>Item</th>
                            <th>Description</th>
                        </tr>
                        <tr>
                            <td><strong>Template Name</strong> field</td>
                            <td>Enter a name for the new template, such as <code>My Header</code></td>
                        </tr>
                        <tr>
                            <td><strong>Template Subject</strong> field</td>
                            <td>Ignore; this field isn't used.</td>
                        </tr>
                        <tr>
                            <td><strong>Insert Variable</strong> Button</td>
                            <td>Click to see a list of variables to insert. For more information about variables, see
                                the <a href="http://www.magentocommerce.com/resources/magento-user-guide"
                                    target="_blank">Magento User Guide</a>.</td>
                        </tr>
                        <tr>
                            <td><strong>Template Content</strong> field</td>
                            <td>Enter the contents of your email template.</td>
                        </tr>
                        <tr>
                            <td><strong>Template Styles</strong> field</td>
                            <td>Ignore; this field is not supported when customizing the header and footer templates.
                            </td>
                        </tr>
                    </tbody>
                </table><br>
                The following figure shows an example:<br>
                <img src="{{ site.baseurl }}/guides/m1x/images/resp_email_header-template.png" width="600px"
                    height="502px"></li>
            <li>Click <strong>Preview Template</strong> to look at the HTML code in a separate browser tab page or
                window, or click <strong>Save Template</strong> to save it.</li>
        </ol>

        <h4 id="custom-head-foot-admin-assign">Using the Template in a Website or Store View</h4>
        <p>This section discusses how to use the email template you just created in the global configuration, a website,
            or a store view.</p>
        <p>To use this template:</p>
        <ol>
            <li>In the Admin Panel, click <strong>System</strong> &gt; <strong>Configuration</strong> &gt; GENERAL &gt;
                <strong>Design</strong>.</li>
            <li>From the <strong>Current Configuration Scope</strong> in the upper left corner, click the scope.<br>
                Initially, the template is associated with <strong>Default Config</strong>, which means it applies to
                all websites and store views. You can optionally associate it with a specific website or store view by
                selecting it from the list.<br>
                The following example shows how to associate a template with the Madison Island English store view.<br>
                <img src="{{ site.baseurl }}/guides/m1x/images/resp_email_template_scope.png"></li>
            <li>In the right pane, click <strong>Transactional Emails</strong> to expand it.</li>
            <li>From the <strong>Email Header Template</strong> list, click the header template you created earlier.<br>
                The following figure shows an example:<br>
                <img src="{{ site.baseurl }}/guides/m1x/images/resp_email_using-header.png" width="600px"
                    height="542px"></li>
            <li>Click <strong>Save Config</strong> in the upper right corner of the page.</li>
        </ol>
        <p>Now transactional emails use the header or footer template you created.</p>

        <h2 id="email-css">Customizing CSS Styles for Emails</h2>
        <p>CSS styles for transactional emails are "inlined" on each HTML tag because many email clients require it.</p>
        <p>CE 1.9.1 and EE 1.14.1 simplifies the way you customize email templates by locating all CSS styles in
            separate CSS files. When transactional emails are sent, the CSS styles are loaded from the separate CSS
            files and are "inlined" in the HTML before being sent.</p>
        <p>Inlining is done using the <a href="https://github.com/jjriv/emogrifier" target="_blank">Emogrifier</a>
            library, which takes the HTML and CSS and adds all of the CSS styles to <code>&lt;style&gt;</code>
            attributes on the HTML tags. </p>
        <p>The CSS for the emails is contained in the following Sass files:</p>
        <ul>
            <li><code>[your Magento install dir]/skin/frontend/rwd/default/scss/email-inline.scss</code></li>
            <li><code>[your Magento install dir]/skin/frontend/rwd/default/scss/email-non-inline.scss</code></li>
        </ul>
        <p>As you might expect, these two files compile to <code>skin/frontend/rwd/default/css/email-inline.css</code>
            and <code>skin/frontend/rwd/default/css/email-non-inline.css</code>, respectively. If you're not familiar
            with how to work with Sass files, refer to the <a href="{{ site.m1xgdeurl }}/ce19-ee114/RWD_dev-guide.html"
                target="_blank">RWD theme documentation</a>.</p>

        <h3 id="email-css-inline">Using Inline Styles to Customize Email CSS</h3>
        <p>
            The <code>email-inline.css</code> file contains all of the styles that the Emogrifier class applies to the
            HTML before an email is sent. Magento applies only these styles to an email template if it contains this new
            directive:</p>
            <pre>&#123;&#123;inlinecss file="email-inline.css"}}</pre>
        <p>Notice that the templates in <code>app/locale/en_US/template/email/</code> include this directive in each
            email template. The directive enables you to specify CSS that loads from the current storefront's theme and
            is inlined on that template.</p>
        <p>The directive supports the standard Magento fallback hierarchy, which means that if the
            <code>email-inline.css</code> can't be found in the store's theme, Magento looks in each of the parent
            themes until a match is found. (A sample theme directory is
            <code>skin/frontend/custompackage/customtheme/css/email-inline.css</code>)</p>
        <p>Refer to the <a href="https://github.com/jjriv/emogrifier#emogrifier" target="_blank">Emogrifier README</a>
            to see what CSS selectors are supported.</p>
        <div class="msg-box important"><img src="{{ site.baseurl }}/guides/m1x/images/icon-note.png" alt="note"
                align="left" width="40"><span><strong>Note</strong>: The <code>&#123;&#123;inlinecss file=""}}</code>
                directive can be used a single time and cannot be used in templates that get included by other templates
                (for example, <code>app/locale/en_US/template/email/html/header.html</code> and
                <code>app/locale/en_US/template/email/html/footer.html</code>).</div>


        <h3 id="email-css-noninline">Using Non-Inline Styles to Customize Email CSS</h3>
        <p>There are certain CSS styles that can't be applied inline, such as media queries styles. These styles must be
            in a <code>&lt;style type=&quot;text/css&quot;&gt;&lt;/style&gt;</code> tag.</p>
        <p>To understand how non-inline styles are included, see line 7 in
            <code>app/locale/en_US/template/email/html/header.html</code>:
            <p>The variable <code>&#123;&#123;var non_inline_styles}}</code> loads CSS from several sources:</p>
            <ul>
                <li>The contents of <code>email-non-inline.css</code>.<br>
                    The file loads from the current storefront's theme and supports the same fallback structure as the
                    <code>email-inline.css</code> file. For Magento to load additional files, go to
                    <strong>System</strong> &gt; <strong>Configuration</strong> &gt; GENERAL &gt;
                    <strong>Design</strong>, click the <strong>Transactional Emails</strong> section and change the
                    value of the <strong>Non-inline CSS File(s)</strong> field.</li>
                <li>Each of the transactional emails has a comment at the top of the template in this format:<br>
                    <pre>&lt;!--@styles
@--&gt;</pre>
                    If you modify a template and add CSS styles inside that comment, they are included in the
                    <code>non_inline_styles</code> variable.
                </li>
                <li>If you customize transactional emails using the Magento Admin Panel, you can add CSS styles to the
                    <strong>Template Styles</strong> field to include those styles in the <code>non_inline_styles</code>
                    variable. For more information, see <a href="#custom-head-foot-admin">Customizing Header and Footer
                        Templates Using the Magento Admin Panel</a>.</li>
            </ul>
            <p>After the CSS is loaded, it's wrapped in a <code>&lt;style
                    type=&quot;text/css&quot;&gt;&lt;/style&gt;</code> tag and is assigned to the
                <code>non_inline_styles</code> variable.</p>
            <div class="msg-box important"><img src="{{ site.baseurl }}/guides/m1x/images/icon-note.png" alt="note"
                    align="left" width="40"><span><strong>Note</strong>: When you are writing "non-inline" CSS, you must
                    add the <code>!important</code> declaration after each property so the style has a high enough
                    specificity to get applied. This is the best way to get your custom styles to override styles
                    defined in the <code>email-inline.css</code> file.</div>


            <h2 id="hi-rez-logo">Using a High-Resolution Logo</h2>
            <p>For the logo in your email to look optimal on high-resolution devices such as retina displays, you must
                use a logo that is at least two times larger than the area in which you want it to display. For example,
                let's say your email has a 200px &times; 100px area for the logo. The logo image must be at least 400px
                &times; 200px.</p>
            <p>If you don't have access to a high-resolution version of your logo, you can upload a normal-resolution
                image. For example, if your logo image is 200px &times; 100px, specify <code>200</code> for the width
                and <code>100</code> for the height.</p>

            <h3 id="hi-rez-upgrade">Upgrade Considerations</h3>
            <p>This section applies to you if you upgraded to CE 1.9.1 or EE 1.14.1 from an earlier version.</p>
            <p>In CE 1.19.1 and EE 1.14.1 for the first time, transactional email templates specify the width and height
                of the area in which the logo displays. Therefore, if you use transactional emails, you must configure
                your templates with a logo height and width as discussed in the next section.</p>
            <p>For example, suppose the area in which the logo displays is 200px &times; 100px. Specify <code>200</code>
                for height and <code>100</code> for width even if the physical dimensions of the logo are larger.</p>

            <h3 id="hi-rez-proc">Adding a High-Resolution Logo</h3>
            <p>You can add your logo to transactional emails in either of the following ways:</p>
            <ul>
                <li><a href="#hi-rez-logo-file">Updating a High-Resolution Logo Using the File System</a></li>
                <li><a href="#hi-rez-logo-admin">Updating a High-Resolution Logo Using the Admin Panel</a></li>
            </ul>

            <h4 id="hi-rez-logo-file">Updating a High-Resolution Logo Using the File System</h4>
            <p>If you can access the Magento server file system, follow these steps:</p>
            <ol>
                <li>Locate the skin directory for your store (for example,
                    <code>skin/frontend/custompackage/customtheme/</code>).</li>
                <li>Save the logo image as <code>logo_email.gif</code> in the skin directory (for example,
                    <code>skin/frontend/custompackage/customtheme/images/logo_email.gif</code>).</li>
                <li>Open <code>app/locale/en_US/template/email/html/header.html</code> in a text editor.</li>
                <li>Update the <strong>width</strong> and <strong>height</strong> attributes to reflect the area in
                    which you want your logo to display (for example, 200px &times; 100px).<br>
                    A snippet follows:<br>
                    <pre>&lt;img
    &#123;&#123;if logo_width}}
    width="&#123;&#123;var logo_width}}"
    &#123;&#123;else}}
    width="200"
    &#123;&#123;/if}}

    &#123;&#123;if logo_height}}
    height="&#123;&#123;var logo_height}}"
    &#123;&#123;else}}
    height="100"
    &#123;&#123;/if}}

    src="&#123;&#123;var logo_url}}"
    alt="&#123;&#123;var logo_alt}}"
    border="0"/></pre>
                </li>
            </ol>
            <div class="msg-box important"><img src="{{ site.baseurl }}/guides/m1x/images/icon-note.png" alt="note"
                    align="left" width="40"><span><strong>Note</strong>: To use a file type other than GIF or if you
                    need to upload unique logos for different websites, stores, or store views, see the next section.
            </div>


            <h4 id="hi-rez-logo-admin">Updating a High-Resolution Logo Using the Admin Panel</h4>
            <p>You can update your high-resolution logo using the Admin Panel if any of the following are true:</p>
            <ul>
                <li>The file format is not GIF</li>
                <li>You don't have access to the Magento server file system</li>
                <li>The logo is specific to a website, store, or store view</li>
            </ul>
            <p>To upload a high-resolution logo using the Admin Panel:</p>
            <ol>
                <li>Log in to the Magento Admin Panel as an administrator.</li>
                <li>Click <strong>System</strong> &gt; <strong>Configuration</strong> &gt; GENERAL &gt;
                    <strong>Design</strong>.</li>
                <li>From the <strong>Current Configuration Scope</strong> in the upper left corner, click the scope to
                    display the logo.<br>
                    Initially, the logo is associated with <strong>Default Config</strong>, which means it applies to
                    all websites and store views. You can optionally associate it with a specific website or store view
                    by selecting it from the list.<br>
                    The following example shows how to associate a logo with the Madison Island English store view.<br>
                    <img src="{{ site.baseurl }}/guides/m1x/images/resp_email_template_scope.png"></li>
                <li>In the right pane, click <strong>Transactional Emails</strong> to expand it.</li>
                <li>Enter the following information:
                    <table>
                        <tbody>
                            <tr>
                                <th>Item</th>
                                <th>Description</th>
                            </tr>
                            <tr>
                                <td><strong>Logo Image</strong></td>
                                <td>Click <strong>Browse</strong> and browse to locate the logo image.</td>
                            </tr>
                            <tr>
                                <td><strong>Delete Image</strong> checkbox</td>
                                <td>Select the checkbox to delete the current logo image. Ignore the other fields.</td>
                            </tr>
                            <tr>
                                <td><strong>Logo Image Alt</strong> field</td>
                                <td>Enter alternate text to display if the image is not available. For a logo, it's
                                    typically the name of your company.</td>
                            </tr>
                            <tr>
                                <td><strong>Logo Width</strong> field</td>
                                <td>Enter the numeric width, in pixels, of the area in which to display the image
                                    (<em>not</em> the dimensions of the logo image).</td>
                            </tr>
                            <tr>
                                <td><strong>Logo Height</strong> field</td>
                                <td>Enter the numeric height, in pixels, of the area in which to display the image
                                    (<em>not</em> the dimensions of the logo image).</td>
                            </tr>
                        </tbody>
                    </table><br>
                    The following figure shows an example.<br>
                    <img src="{{ site.baseurl }}/guides/m1x/images/resp_email_logo.png" width="600px" height="509px">
                </li>
                <li>Click <strong>Save Config</strong> in the upper right corner of the page.</li>
            </ol>

            <h2 id="contact-info">Using Contact Information in Transaction Emails</h2>
            <p>Transactional emails can output your store email address, store phone number, and store hours of
                operation if those values are configured in the Admin Panel. To set those values:</p>
            <ol>
                <li>Log in to the Magento Admin Panel as an administrator.</li>
                <li>To set the phone number and hours of operation:
                    <ol>
                        <li>Click <strong>System</strong> &gt; <strong>Configuration</strong> &gt; GENERAL &gt;
                            <strong>General</strong>.</li>
                        <li>In the right pane, click <strong>Store Information</strong> to expand it.</li>
                        <li>If you want to include a phone number, input the phone number in the <strong>Store Contact
                                Telephone</strong> field.</li>
                        <li>If you want to include your hours of operation, input them in the <strong>Store Hours of
                                Operation</strong> field.</li>
                    </ol>
                </li>
                <li>To set the store email address:
                    <ol>
                        <li>Click <strong>System</strong> &gt; <strong>Configuration</strong> &gt; GENERAL &gt;
                            <strong>Store Email Addresses</strong>.</li>
                        <li>In the right pane, click <strong>General Contact</strong> or <strong>Sales
                                Representative</strong> to expand it.</li>
                        <li>In the <strong>Sender Name</strong> field, input the name that you want the email to be sent
                            from, such as your company name.</li>
                        <li>In the <strong>Sender Email</strong> field, input the email address.</li>
                    </ol>
                </li>
                <li>When you're finished, click <strong>Save Config</strong> in the upper right corner of the page.</li>

            </ol>

            <h2 id="localizing">Localizing Transactional Emails</h2>
            <p>Only the en_US templates were updated to the new responsive email structure. To use the responsive emails
                for other locales, copy the <code>en_US/template/email/</code> directory into the respective
                <code>app/locale/[LOCALE CODE]</code> directory and update the text strings to that locale.</p>

            <h2 id="newsletter-template">Using Updated Newsletter Templates</h2>
            <p>The focus of this article is on transactional emails but the same techniques can be used with newsletter
                templates as well, including:</p>
            <ul>
                <li>Import the header and footer using the <a href="#custom-head-foot"><code>&#123;&#123;template
                            config_path=""}}</code></a> directives</li>
                <li>Apply inline styles using the <a href="#email-css"><code>&#123;&#123;inlinecss file=""}}</code></a>
                    directive</li>
                <li>Include non-inline styles using <a href="#email-css-noninline"><code>&#123;&#123;var
                            non_inline_styles}}</code></a></li>
            </ul>
            <p>In the Magento Admin Panel, go to <strong>Newsletter</strong> &gt; <strong>Newsletter Templates</strong>
                and look at the template named <strong>Example Newsletter Template</strong>. We added this template as a
                reference for how to build a responsive newsletter.</p>


            <h2 id="help">Getting Help</h2>
            <p>If you encounter issues customizing email templates, contact Magento Support. Another option is to post
                your question on the community <a href="http://magento.stackexchange.com/questions/ask"
                    target="_blank">magento.stackexchange.com</a> site and tag it with <code>rwd-email</code> and
                <code>rwd-theme</code>.</p>

    </div>
</body>

</html>